<!-- 表格组件 -->
<script lang="tsx" setup>
import { toRaw } from 'vue';

import type { TableColumnOption } from '@/components/table-widget/table-widget.vue';
import TableWidget from '@/components/table-widget/table-widget.vue';
import {
  ENTERPRISE_INDUSTRY_OPTIONS,
  ENTERPRISE_INTEGRITY_LEVEL_OPTIONS,
  getEnumOptionsField,
} from '@/config/enum-options';

import { injectState } from '../state';

defineOptions({ name: 'Sheet' });

const {
  selectedList,
  tableRef,
  detailDialogRef,
  page: { records, isLoading },
} = injectState()!;

watch(records, () => tableRef.value?.table?.clearSelection());

const columns: TableColumnOption<(typeof records.value)[0]>[] = [
  {
    label: '序号',
    type: 'index',
    fixed: 'left',
    width: 80,
  },
  {
    label: '企业名称',
    formatter: (row) => (
      <>
        <span
          v-show={row.inBlacklist}
          class="mr-8px rd-2px bg-#363636 px-4px py-2px text-12px text-#fff!"
        >
          黑
        </span>
        {row.name ?? '-'}
      </>
    ),
  },
  {
    label: '所属行业',
    formatter: (row) =>
      getEnumOptionsField(ENTERPRISE_INDUSTRY_OPTIONS, 'label', row.industry) ?? '-',
  },
  {
    label: '企业负责人',
    formatter: (row) => row.mainMasterName ?? '-',
  },
  {
    label: '负责人联系方式',
    formatter: (row) => row.mainMasterPhone ?? '-',
  },
  {
    label: '基本信息填报率',
    formatter: (row) => row.completeness ?? '-',
  },
  {
    label: '诚信等级',
    formatter: (row) =>
      getEnumOptionsField(ENTERPRISE_INTEGRITY_LEVEL_OPTIONS, 'label', row.integrityLevel) ?? '-',
  },
  {
    label: '备注',
    formatter: (row) => row.integrityLevelRemark ?? '-',
  },
  {
    label: '操作',
    export: false,
    fixed: 'right',
    width: '200',
    noExport: true,
    formatter(row) {
      return (
        <>
          <el-button
            size="small"
            type="primary"
            text
            onClick={() => detailDialogRef.value?.trigger('read', row)}
          >
            详情
          </el-button>
          <el-button
            size="small"
            type="primary"
            text
            onClick={() => detailDialogRef.value?.trigger('write', row)}
          >
            编辑
          </el-button>
        </>
      );
    },
  },
];
</script>

<template>
  <TableWidget
    ref="tableRef"
    v-loading="isLoading"
    :data="records"
    :columns="columns"
    h="100%!"
    @selection-change="(rows:any) => (selectedList = toRaw(rows))"
  />
</template>
